// src/components/todo-list.vue

<template>
    <div>我是todo-list组件</div>
    <div>
        <div>{{ todos.length }}</div>
        <!-- 模板的其余部分 -->
        <todo-item></todo-item>
    </div>
</template>

<script lang="ts">
import { computed, defineComponent, reactive } from "vue";
import TodoItem from './todo-item.vue'

export default defineComponent({
    name: 'TodoList',
    components: {
        TodoItem
    },
    //在provide中要访问组件实例属性，应将provide转换为返回对象的函数
    //解决基本示例和上面示例，provide更新，inject中响应式更新
    provide() {
        return {
            todoLength: computed(() => this.todos.length)
        }
    },
    setup() {
        const todos = reactive(['Feed a cat', 'Buy tickets'])

        return {
            todos
        }
    }
})
</script>